<template>
  <div class="reply-input-wrapper" style="display: none" ref="reply">
    <textarea
      class="comment-textarea"
      :placeholder="'回复 @' + nickname + '：'"
      auto-grow
      dense
      v-model="commentContent"
      />
    <div class="emoji-container">
      <span
        :class="chooseEmoji ? 'emoji-btn-active' : 'emoji-btn'"
        @click="chooseEmoji = !chooseEmoji"
        >
        <i class="iconfont iconbiaoqing" />
      </span>
      <div style="margin-left: auto">
        <button @click="cancleReply" class="cancle-btn v-comment-btn">
          取消
        </button>
        <button @click="insertReply" class="upload-btn v-comment-btn">
          提交
        </button>
      </div>
    </div>
  <!-- 表情框 -->
    <emoji @addEmoji="addEmoji" :chooseEmoji="chooseEmoji" />
  </div>
</template>

<script>
import Emoji from "@/components/emoji/Emoji";
import EmojiList from "../../assets/js/emoji"
import {saveComment} from "@/api/comment";
export default {
  name: "Reply",
  components: {Emoji},
  props:{
    type:{
      type: Number
    }
  },
  data(){
    return {
      index: 0,
      chooseEmoji: false,
      nickname: "",
      replyUserId: null,
      parentId: null,
      commentContent: ""
    }
  },
  methods:{
    cancleReply() {
      this.$refs.reply.style.display = "none"
    },
    insertReply(){
      // 判断登录
      if (!this.$store.state.userId) {
        this.$store.state.loginFlag = true
        return false
      }
      if (this.commentContent.trim() == "") {
        this.$toast({type:"error",message:"回复不能为空"})
        return false
      }
      // 解析表情
      var reg = /\[.+?\]/g
      this.commentContent = this.commentContent.replace(reg,function (str) {
        return (
            "<img src= '" + EmojiList[str] +
            "' width='24' height='24' style='margin:0 1px; vertical-align:text-bottom'/>"
        )
      })
      const path = this.$route.path
      const arr  =path.split("/")
      var comment = {
        type:this.type,
        replyUserId: this.replyUserId,
        parentId:this.parentId,
        commentContent:this.commentContent
      }
      switch (this.type) {
        case 1:
        case 3:
          comment.topicId = arr[2]
          break
        default:
          break
      }
      this.commentContent = ""
      saveComment(comment).then(({data}) => {
        if (data.flag) {
          this.$emit("reloadReply", this.index)
          this.$toast({type:"success",message:"回复成功"})
        } else {
          this.$toast({type:"error",message:data.message})
        }
      })
    },
    addEmoji(text) {
      this.commentContent += text
    }
  }
}
</script>

<style scoped>
.reply-input-wrapper {
  border: 1px solid #90939950;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}
</style>
